import { useState, useEffect } from 'react'
/* -------------------------------------------------------- antd -- */
import { TimePicker } from 'antd'
import dayjs from 'dayjs'
/* -------------------------------------------------------- Declare -- */
const { $fn } = window
/* -------------------------------------------------------- 回到顶部 -- */
const Index = ({
	style, 							/** @param {String}				# 盒子 style */
	name, 							/** @param {String}				# name */
	label,							/** @param {String}				# 标签名 */
	p,								/** @param {String}				# 提示语 */
	hint='请选择',					/** @param {String}				# 提示语 */
	width,							/** @param {String}				# 宽度 */
	format=0,						/** @param {String}				# 格式 */
	//
	value,							/** @param {Number}				# 值 */
	disabled,						/** @param {Boolan}				# 禁用 */
	allowClear=true,				/** @param {Boolan}				# 显示清除按钮 */
	// 获取值
	onChange,						/** @param {Event}				# 有 Form 时值改变时执行 */
	onChanged,						/** @param {Event}				# 值改变时执行 */
	form, 							/** @param {Object}				# 存储值 */
	// 自定义扩展
	antd = {},						/** @param {Object}				# antd */
}, ref)=> { // eslint-disable-line
	const [ model, setModel ] = useState()
	
	p = p ? p : hint + label
	
	const formatType = [
		`HH:mm`,
		`HH:mm:ss`
	]
	
	useEffect(()=> {
		setModel( () => {
			return value ? dayjs(value, formatType[format]) : null
		} )
	}, [ value ])  // eslint-disable-line
	const _onChange = (date, value) => {
		onChange?.( value )
		if( onChanged || form ){
			const result = $fn.getFormFormat({label, name, value, form, formType:'text' })
			onChanged?.(result)
		}
	}
	antd = {
		disabled, allowClear, 
		placeholder: p,
		value: model,
		style: { width, ...style },
		format: formatType[format],
		//
		onChange:_onChange,
		...antd
	}
	return (
		<div onClick={e=>e.stopPropagation()} className='ex'>
			<TimePicker  {...antd} />
		</div>
	)
}

export default Index